<template>
  <div>
    <el-dialog class="designFormDialog"
               v-model="dialog.visible"
               :fullscreen="true"
               modal-append-to-body
               :modal-append-to-body="false"
               append-to-body title="设计表格">
      <avue-form-design :key="avueFormDesignKey"
                        v-if="dialog.visible"
                        ref="avueFormDesign"
                        style="height: calc(100vh - 40px);"
                        :options="options"
                        @submit="handleSubmit"
                        :toolbar="toolbar">
        <template #toolbar-right>
          <el-button link type="danger" icon="el-icon-close" @click="closeDialog()" circle></el-button>
        </template>
        <template #save-dropdown-item>
          <el-dropdown-item icon="el-icon-edit-outline"
                            @click.native="saveAndRelease">保存并发布
          </el-dropdown-item>
        </template>
      </avue-form-design>
      <start-form-edit-dialog ref="createForm" @submit="saveFormOption"></start-form-edit-dialog>
      <start-form-preview-table ref="actFormDataTable"></start-form-preview-table>
    </el-dialog>
  </div>
</template>

<script>

import AvueFormDesign from "../form-design/index.vue"

import config from "../form-design/config";
import formApi from "@/api/start/formEngine/formApi";

import StartFormEditDialog from "./start-form-edit-dialog.vue";
import StartFormPreviewTable from "./start-form-preview-table.vue";


export default {
  name: "start-form-design-dialog",
  components: {
    StartFormPreviewTable,
    StartFormEditDialog,
    AvueFormDesign,

    config,

  },
  computed: {
    toolbar() {
      return ['preview', 'clear', "save", 'import']
    }
  },
  data() {
    return {
      dialog: {
        visible: false,
      },
      options: {column: []},
      formId: null,
      formModel: null,
      tempOption: null,
      avueFormDesignKey: Math.random(),
    }
  },
  created() {

  },
  methods: {
    show(tableId) {
      this.formId = tableId;
      this.dialog.visible = true;
      this.loadFormConfig();
    },
    loadFormConfig() {
      if (!this.formId) {
        this.formModel = {};
        this.options = {column: []}
        return
      }
      let loading = this.createLoading()
      formApi.getTableOption(this.formId).then(res => {
        let data = res.data.data;
        if (!data) return;
        this.formModel = data;
        this.options = data.formOption
        this.avueFormDesignKey = Math.random();
      }).finally(() => loading.close())
    },
    previewTableShow() {
      this.$refs.avueFormDesign.getFormOption().then(res => {
        this.$refs.actFormDataTable.show(res);
      })
    },
    saveAndRelease() {
      this.$refs.avueFormDesign.getFormOption().then(data => {
        if (data.column.length < 1) {
          this.$message.warning("至少配置一个表单组件")
          return;
        }
        this.tempOption = data;
        if (!this.formModel.formId) {
          this.$refs.createForm.show(this.formModel, true);
          return
        }
        this.submitFormConfig()
      });
    },
    handleSubmit(data, done) {
      if (data instanceof SubmitEvent) return;
      if (data.column.length < 1) {
        this.$message.warning("至少配置一个表单组件")
        return;
      }
      this.tempOption = data;
      if (!this.formModel.formId) {
        this.$refs.createForm.show(this.formModel);
        return
      }
      this.submitFormConfig()
    },
    saveFormOption(val, synchronization, done) {
      this.formModel = val;
      this.submitFormConfig(synchronization, done)
    },
    submitFormConfig(synchronization, done) {
      let tempOption = this.tempOption
      for (let i = 0; i < tempOption.column.length; i++) {
        tempOption.column[i].sort = i + 1;
      }

      this.formModel.formOption = tempOption;
      let loading = this.createLoading("提交中")
      formApi.saveOrUpdate(this.formModel, synchronization).then(res => {
        let msg = "保存"
        if (true === synchronization) {
          msg += "并发布"
        }
        this.$message.success(msg + "成功！");
        if (res.data.data) {
          this.formId = res.data.data
        }
        this.$emit("submit")
        if (done) {
          done()
        }
        this.loadFormConfig();
      }).finally(() => loading.close())
    },
    handleForm(val, done) {
      this.$emit("submit", val, done)
    },
    createLoading(text = "Loading", spinner = "el-icon-loading", background = 'rgba(0, 0, 0, 0.7)', lock = true) {
      return this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    closeDialog() {
      let fun = () => {
        this.options = {column: []};
        this.formId = null
        this.formModel = null;
        this.tempOption = null;
        this.dialog.visible = false;
      }
      this.$confirm('您却确定要关闭该当前已编辑的内容吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        fun();
      }).catch(() => {

      });

    },
  },

}
</script>

<style lang="scss">
.designFormDialog .el-dialog__body {
  padding: 0px;
}

.designFormDialog .el-dialog__header {
  display: none;
}

.designFormDialog .el-form-item__content {
  display: block;

  .el-select, el-tree {
    display: block;
  }

}

.designFormDialog .el-form-item__label {
  padding: 0 5px 0 0;


}

</style>
